<template>
  <div class="flex justify-center nav-bar">
    <div class="nav-item" :class="{active: activeName === 'Pay'}" @click="clickItem('Pay')">
      首页
    </div>
    <div class="nav-item" :class="{active: activeName === 'List' || activeName === 'Recording'}" @click="clickItem('List')">
      会员列表
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Provide, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Navbar extends Vue {
  @Provide()
  activeName: string = 'Pay'

  clickItem(name: any) {
    this.activeName = name
    this.$router.push({name})
  }

  @Watch('$route')
  watchRoute(val: any) {
    console.log('-------------- val: ', val);
    if (this.activeName !== val) {
      this.activeName = val.name || 'Pay'
    }
  }
}
</script>
<style lang='scss' scoped>
.nav-bar {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  line-height: 59px;
  color: #666;
  background: #fff;

  .nav-item {
    padding: 0 20px;
    margin: 0 20px;
    cursor: pointer;

    &.active {
      border-bottom: 1px solid #000;
      color: #000;
    }
  }
}
</style>